<template>
	<view class="page">
		<view class="form-box" v-if="form">
			<view class="item">
				<view class="msg">
					联系人
				</view>
				<view class="input">
					<input type="text" v-model="form.real_name" placeholder="请填写收货人姓名" />
				</view>
			</view>
			<view class="item">
				
				<view class="msg">
					手机号码
				</view>
				<view class="input">
					<input type="text" v-model="form.phone" placeholder="请填写收货手机号" />
				</view>
			</view>
			<view class="item">
				
				<view class="msg">
					所在地区
				</view>
				<view class="select" @click="show=true">
					<view class="placeholder" v-if="form.address.province==''">
						省市区县、乡镇等
					</view>
					<view class="val" v-else>
						{{form.address.province}} {{form.address.city}} {{form.address.district}}
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#9BA2AB" size="20rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				
				<view class="msg">
					详细地址
				</view>
				<view class="input">
					<textarea name="" v-model="form.detail" placeholder="街道、楼牌号等"></textarea>
				</view>
			</view>
			<view class="mr">
				设为默认地址 <view class="r"><u-switch :activeValue="1" :inactiveValue="0" v-model="form.is_default" activeColor="#FD2A00" ></u-switch></view>
			</view>
		</view>
		<view class="del-btn" @click="onDel">
			删除该地址
		</view>
		
		<view class="bottom-box">
			<view class="btn" @click="onSubmit">
				保存
			</view>
		</view>
		<up-picker :show="show" closeOnClickOverlay ref="uPicker" :defaultIndex="defaultIndex" confirmColor="#FD2A00" @close="show=false" @cancel="show=false" :columns="columns" keyName="n" @confirm="onSelectCity" @change="changeHandler"></up-picker>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {addressEdit,getCityList,getAddressDetail,addressDel} from "@/api/products.js"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	const form=ref('')
	const show=ref(false)
	const columns=ref('')
	const defaultIndex=ref([0,0,0])
	const cityData=ref([])
	const uPicker=ref(null)
	onLoad( async (obj)=>{
		let res= await getCityList()
		let info=await getAddressDetail(obj.id)
		res=res.data
		info=info.data
		form.value={
				id:obj.id,
				is_default: info.is_default, 
				real_name: info.real_name, 
				phone: info.phone, 
				detail: info.detail, 
				post_code:  info.post_code, 
				address: {
					province: info.province, 
					city: info.city, 
					district: info.district, 
					province_id: info.province_id, 
					city_id: info.city_id, 
					district_id: info.district_id
				} 
			}
		cityData.value=res
		let _columns=[];
		_columns.push(cityData.value.map((it)=>{
			return {v:it.v,n:it.n}
		}))
		let city=cityData.value.find((it)=>it.n==info.province)
		_columns.push(city.c.map((it)=>{
			return {v:it.v,n:it.n}
		}))
		let district=city.c.find((it)=>it.v==info.city_id)
		_columns.push(district.c.map((it)=>{
			return {v:it.v,n:it.n}
		}))
		defaultIndex.value=[_columns[0].findIndex((it)=>it.n==info.province),_columns[1].findIndex((it)=>it.v==info.city_id),_columns[2].findIndex((it)=>it.n==info.district)]
		columns.value=_columns
	})
	
	const onSelectCity=(e)=>{
		let _form=uni.$u.deepClone(form.value)
		_form.address={
			province: e.value[0].n,
			city:  e.value[1].n,
			district:  e.value[2].n,
			province_id: e.value[0].v,
			city_id: e.value[1].v,
			district_id: e.value[2].v
		}
		form.value=_form;
		show.value=false;
	}
	const changeHandler=(e)=>{
		const {
			columnIndex,
			index,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker = uPicker.value
		} = e
		if (columnIndex === 0) {
			picker.setColumnValues(1, cityData.value[index].c.map((it)=>{
				return {v:it.v,n:it.n}
			}))
			picker.setColumnValues(2, cityData.value[index].c[0].c.map((it)=>{
				return {v:it.v,n:it.n}
			}))
		}else if (columnIndex === 1) {
			picker.setColumnValues(2, cityData.value[e.indexs[0]].c[index].c.map((it)=>{
				return {v:it.v,n:it.n}
			}))
		}
	}
	const onSubmit=async ()=>{
		let post=form.value;
		if(post.real_name==''){
			uni.$u.toast('联系人不能为空！');return false;
		}
		if(!uni.$u.test.mobile(post.phone)){
			uni.$u.toast('输入正确手机号！');return false;
		}
		if(post.address.city==''){
			uni.$u.toast('选择地区！');return false;
		}
		if(post.detail==''){
			uni.$u.toast('输入详细地址！');return false;
		}
		uni.showLoading({
			mask:true
		})
		try {
			let res=await addressEdit(post);
			uni.hideLoading()
			uni.$u.toast('修改成功')
			setTimeout(()=>{
				uni.navigateBack()
			},1500)
			
		} catch (error) {
			uni.hideLoading()
			uni.$u.toast(error)
		}
		
	}
	const onDel=async ()=>{
		await addressDel({id:form.value.id})
		uni.$u.toast('删除成功！')
		setTimeout(()=>{
			uni.navigateBack()
		},1500)
	}
	
</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
	}
	.page{
		padding:20rpx 24rpx;
	}
	.form-box{
		background-color: #fff;
		padding:0 28rpx;
		border-radius: 16rpx;
		padding-bottom: 40rpx;
		.item{
			display: flex;min-height: 110rpx;
			border-bottom: 1rpx solid #fafafa;
			.msg{
				width:150rpx;font-size: 28rpx;line-height: 110rpx;font-weight: bold;
			}
			.input{flex:1;
				input{
					width:100%;font-size:28rpx;line-height: 110rpx;height:110rpx;
				}
				textarea{
					width:100%;font-size:28rpx;margin-top:38rpx;
					height:140rpx;
				}
			}
			.select{
				flex: 1;font-size:28rpx;
				.placeholder{
					color:#8C8B89;
				}
				display: flex;justify-content: space-between;align-items: center;
			}
		}
	}
	.mr{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		
		margin-top:36rpx;
		border-radius: 16rpx;
	}
	.del-btn{
		margin-top: 20rpx;
		background-color: #fff;
		padding:0 28rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 100rpx;
		color:#FD2A00;
		
	}
	
	.bottom-box{
		background-color: #fff;
		padding:10rpx 28rpx;
		display: flex;box-sizing: border-box;
		position: fixed;bottom:0;left:0;
		width:100%;z-index: 99;align-items: center;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		.btn{
			width:100%;
			border-radius: 12rpx;
			line-height: 80rpx;
			background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
			text-align: center;
			font-size:28rpx;color:#FFFFFF;font-weight: bold;
		}
	}
</style>
